﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左侧分类菜单-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	padding:0px;
	margin:0px;
	font-size:12px;
}
ul {
	list-style:none;
}
#main {
	margin:0 auto;
	width:1264px;
	height:590px;
	background:url(./images/bg.jpg) no-repeat;
	position:relative;
}
ul#memu {
	list-style:none;
	position:absolute;
	left:38px;
	top:20px;
	width:190px;
}
a {
	color:#7B7B7B;
	text-decoration:none;
}
ul#memu li.firstli {
	color:#7B7B7B;
	padding-left:5px;
	background:url(./images/icon3.jpg) no-repeat left center;
	position:relative;
}
ul#memu li.firstli a.firsta {
	padding-left:5px;
	display:block;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	height:24px;
	line-height:26px;
	width:170px;
}
ul#memu li.firstli  a.on {
	border-top:1px solid #e3e4e4;
	border-bottom:1px solid #e3e4e4;
	height:24px;
	background:url(./images/icon.jpg) no-repeat right center;
	z-index:9999;
}
.secondNav {
	position:absolute;
	left:180px;
	top:0px;
	border:1px solid red;
	z-index:33;
	width:400px;
	height:300px;
	background:#fff;
	border:1px solid #e4e4e4;
	padding:20px;
	box-shadow:5px 5px 10px #e4e4e4;
	display:none;
}
h4 {
	width:100px;
	color:#FF6600;
	padding-right:5px;
	background:url(./images/icon2.jpg) no-repeat right center;
}
.secondNav a {
	line-height:26px;
	padding:3px;
}
</style>
</head>
<body>
<div id="main">
<ul id="memu">
<li class="firstli"> <a href="#" class="firsta">尾品汇</a>
      <div class="secondNav">
    <ul>
          <li>
        <h4>尾品汇</h4>
        <a href="#">nike</a> <a href="#">李林</a> <a href="#">安踏</a> </li>
        </ul>
  </div>
    </li>
<li class="firstli"> <a href="#" class="firsta">手机、数码</a>
      <div class="secondNav">
    <ul>
          <li>
        <h4>手机通讯</h4>
        <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">运营商</a> </li>
          <li>
        <h4>手机通讯</h4>
        <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">运营商</a> </li>
          <li>
        <h4>手机通讯</h4>
        <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">运营商</a> </li>
        </ul>
  </div>
    </li>
<li class="firstli"> <a href="#" class="firsta">图书、音响、数字馆</a>
      <div class="secondNav">
    <ul>
          <li>
        <h4>图书</h4>
        <a href="#">文艺</a> <a href="#">理智</a> <a href="#">科技</a> </li>
          <li>
        <h4>音响</h4>
        <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">运营商</a> </li>
          <li>
        <h4>数字馆</h4>
        <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">运营商</a> </li>
        </ul>
  </div>
    </li>
<li class="firstli"> <a href="#" class="firsta">服装、内衣</a>
      <div class="secondNav">
    <ul>
          <li>
        <h4>服装</h4>
      </li>
          <li>
        <h4>内衣</h4>
      </li>
        </ul>
  </div>
    </li>
<li class="firstli"> <a href="#" class="firsta">美妆、个人护理</a>
      <div class="secondNav">
    <ul>
          <li>
        <h4>美妆</h4>
        <a href="#">面部</a> <a href="#">彩妆</a> <a href="#">香水</a> </li>
          <li>
        <h4>个人护理</h4>
        <a href="#">男士</a> <a href="#">口腔</a> <a href="#">头发</a> </li>
        </ul>
  </div>
    </li>
</div>
</div><script>
$(function() {
    $("#memu .firstli > a").hover(function() {
        $(this).addClass("on");
        $(this).next('.secondNav').show();

    }, function() {
        $('.secondNav').hide();
        $("#memu .firstli > a").removeClass("on");
    })

    $(".secondNav").hover(function() {
        $(this).show().prev("a").addClass("on");
    }, function() {
        $('.secondNav').hide();
        $("#memu .firstli > a").removeClass("on");
    })

})</script>
</body>
</html>
